<template>
  <div :class="isShow?'notice fadeOut':'notice fadeIn'" :style="{'background-color':backgroundColor}">
    <div class="notice_box"><p class="notice_text">{{type}}</p></div>
  </div>
</template>

<script>
  export default {
    name: "notice",
    data(){
      return {
        isShow:false
      }
    },
    props:{
      type:{
        type:String,
        default:'通知内容'
      },
      backgroundColor:{
        type:String,
        default: '#07C160'
      }
    },
    beforeCreate() {
      setTimeout(()=>{
        this.isShow = true
      },3000)
    }
  }
</script>

<style scoped>
  .notice {
    width: 100%;
    height: .3rem;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
  }
  .notice_box {
    width: 100%;
    height: .3rem;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .notice_text {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FFFFFF;
  }
  .fadeIn {
    animation: fadeIn 0.5s;
    -moz-animation: fadeIn 0.5s;
    -webkit-animation: fadeIn 0.5s;
    -o-animation: fadeIn 0.5s;
  }
  .fadeOut {
    animation: fadeOut 0.5s;
    -moz-animation: fadeOut 0.5s;
    -webkit-animation: fadeOut 0.5s;
    -o-animation: fadeOut 0.5s;
  }
  @keyframes fadeIn {
    0%{
      top: -.5rem;
    }
    100%{
      top: 0;
    }
  }
  @-webkit-keyframes fadeIn {
    0%{
      top: -.5rem;
    }
    100%{
      top: 0;
    }
  }
  @-moz-keyframes fadeIn {
    0%{
      top: -.5rem;
    }
    100%{
      top: 0;
    }
  }
  @-o-keyframes fadeIn {
    0%{
      top: -.5rem;
    }
    100%{
      top: 0;
    }
  }
  @keyframes fadeOut {
    0%{
      top: 0;
    }
    100% {
      top: -.5rem;
    }
  }
  @-webkit-keyframes fadeOut {
    0%{
      top: 0;
    }
    100% {
      top: -.5rem;
    }
  }
  @-moz-keyframes fadeOut {
    0%{
      top: 0;
    }
    100% {
      top: -.5rem;
    }
  }
  @-o-keyframes fadeOut {
    0%{
      top: 0;
    }
    100% {
      top: -.5rem;
    }
  }
</style>
